<template>
  <div class="login-warpper">
    <!-- <headers :title="'注册'"/> -->
    <div class="topBox flex">
      <span>Hi, 欢迎你！</span>
      <div>
        <img class="avatar" src="../assets/images/2.png">
      </div>
    </div>
    <group>
      <x-input placeholder="请输入用户名" placeholder-style="color:#f00;" type="number" is-type="china-mobile" show-clear v-model="phone"></x-input>
      <x-input type="password" placeholder="请输入登录密码"  show-clear v-model="password"></x-input>
    </group>
    <div class="next-box" @click="handleLogin">
      <span>登录</span>
    </div>
    <div class="bomBox flex">
      <span @click="forgetPwd">忘记密码</span>
      <span class="leftText">没有账户? <span class="redLink" @click="goRegister">  立即注册</span></span>
    </div>
    <x-dialog :show.sync="passwordDiol" dialog-transition="aa" :hide-on-blur="false" :dialog-style="{'max-width': '100%', width: '100%', height: 'auto', 'background-color': 'transparent'}" class="dialog-demo" @on-hide="handleClose">
      <div class="weui-dialog" style="">
        <div class="weui-dialog__hd">
          <!-- <strong class="weui-dialog__title">忘记密码</strong> -->
          <span class="small">短信验证码已发送,请注意查收</span>
        </div> 
        <div class="vux-prompt" style="padding-top: 0.8em;">
          <input placeholder="请输入短信验证码" type="number" v-model="code" class="vux-prompt-msgbox">
        </div> 
        <div class="vux-prompt">
          <input placeholder="新密码" type="text" v-model="newPassword"  class="vux-prompt-msgbox">
        </div> 
        <div class="weui-dialog__ft">
          <span @click="passwordDiol=false" class="weui-dialog__btn weui-dialog__btn_default">取消</span> 
          <span @click="handleComfirm" class="weui-dialog__btn weui-dialog__btn_primary">确定</span>
        </div>
      </div>
    </x-dialog>
  </div>
</template>

<script>
  import axios from '@/api/request'
  import headers from '../components/header.vue'
  import { Group,XInput,Cell,CheckIcon,XDialog,XButton } from "vux";
  import { mapState, mapMutations } from "vuex";
  export default {
    name: '',
    components: {
      Group,
      headers,
      XInput,
      CheckIcon,
      XDialog,
      XButton
    },
    data () {
      return {
        name: '',
        phone: '',
        password: '',
        repassword: '',
        _openId: '',
        passwordDiol: false,
        newPassword: '',
        code: null,
      }
    },
    created(){
     this._openId = this.$route.query.openId
    },
    mounted(){

    },
    methods:{
      ...mapMutations(['SET_OPENID','SET_USERID','SET_PHONE','SET_SCHOOLID']),
      handleLogin(){
        let self = this
        let userEntity = {
            username: this.phone,
            password: this.password,
        }
        axios('/device/userEntity/userEntityLogin','post',userEntity).then(res=>{
          console.log(res)
          if(res.data.code==1000){
              self.SET_OPENID(res.data.data.openId)
              self.SET_USERID(res.data.data.id)
              self.SET_PHONE(res.data.data.username)
              self.SET_SCHOOLID(res.data.data.schoolId)
              this.$router.push({path:'home',query:{userId: res.data.data.id}})
          }else{
             this.$vux.toast.text(res.data.message)
          }
        })
      },
      goRegister(){
        this.$router.push({path:'/Register',query:{openId: this._openId}})
      },
      forgetPwd(){     //忘记密码
        let self = this;
        if(!self.phone){
          self.$vux.toast.text('请先输入账号', 'middle')
        }else{
          self.passwordDiol = true
          axios('/device/userEntity/selectByUsernameIsHave','post',{username: self.phone}).then(res=>{
              if(res.data.code==1000){
                console.log('验证码发送成功')
              }
          })
        }
      },
      handleComfirm() {
        let _data = {
          username: this.phone,
          password: this.newPassword,
          code: this.code,
        }
        if(_data.password&&_data.code){
          axios('/device/userEntity/updatePassword','post',_data).then(res=>{
            if(res.data.code==1000){
              this.$vux.toast.text('密码修改成功,请重新登录', 'middle')
              this.passwordDiol = false
            }
          })
        }else{
          this.$vux.toast.text('请填完整再提交', 'middle')
        }
        
      },
      handleClose() {

      }
    }

  };
</script>

<style >
    body{
        position: absolute;
        left: 0;
        top: 0;
        /*background: rgb(244,244,244);*/
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    .login-warpper .weui-cells.vux-no-group-title{
      margin-top: 0;
    }
    .login-warpper .weui-cells:before{
      border-top: 0;
    }
    .login-warpper input::-webkit-input-placeholder{
      color: #aaa;
      font-size: 30rem/75;
    }
</style>
<style lang="less" scoped>
  .leftText{
    flex:1;
    text-align:right;
  }
  .login-warpper{
    height: 100%;
    box-sizing: border-box;
    padding: 0 104rem/75;
    background: #fff;
    .weui-cells .weui-cell:before {
      left: 0;
      border-top: 0;
    }
    .weui-cell {
      padding-left: 14rem/75;
      border-bottom: 1px solid #ddd;
    }
    .vux-x-input.weui-cell{
      height: 110rem/75;
      padding-top: 30rem/75;
      padding-bottom: 0;
    }
    .topBox{
      height: 350rem/75;
      align-items: center;
      justify-content: space-between;
      span{
        font-size: 46rem/75;
        color: #444;
        font-weight: 600;
      }
      .avatar{
        height: 150rem/75;
        width: 150rem/75;
        border-radius: 50%;
      }
    }
    div.weui-cells{
      margin-top: 5px;
    }
    div.vux-x-switch.weui-cell.weui-cell_switch:before{
      border-top: 0;
    }
    .selectBox{
      height: 55px;
      border-top: 1px solid #ddd;
      select{
        width: 100%;
        height: 100%;
        border: 0;
        padding-left: 8rem/75;
        padding-top: 24rem/75;
        color: #000;
        font-size: 34rem/75;
      }
      .firstOpt{
        color: #aaa;
        font-size: 30rem/75;
      }
    }
    .fengeBar{
      height: 20rem/75;
      background: rgb(244,244,244);
    }
    .next-box{
      width: 544rem/75;
      height: 90rem/75;
      line-height: 90rem/75;
      background: #ff485f;
      color: #fff;
      text-align: center;
      font-size: 35rem/75;
      margin-top: 148rem/75;
      border-radius: 8rem/75;
    }
    .bomBox{
      align-items: center;
      justify-content: space-between;
      margin-top: 36rem/75;
      color: #999;
      .redLink{
        color: #ff485f;
      }
    }
  }

</style>

